<!--
 * @Descripttion: 客户管理列表页
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2019-12-07 18:58:32
 -->
<template>
  <div>
    <el-main>
      <div class="clearfix">
        <el-input
          v-model="searchData.name"
          class="fl"
          size="small"
          style="width: 360px"
          placeholder="按客户名称, 联系地址等查询."
          @keydown.enter.native="btnSearch"
        >
          <el-button slot="append" icon="el-icon-search" type="primary" :loading="btnLoading.search" @click="btnSearch()" />
        </el-input>
        <div class="fl paddingL10">
          <el-button
            size="small"
            type="primary"
            @click="btnAddData"
          >
            添加
          </el-button>
        </div>
      </div>
      <div class="table-container">
        <vxe-grid
          ref="table"
          class="grid"
          border
          size="small"
          resizable
          highlight-hover-row
          :loading="tableLoading.customer"
          :edit-config="{trigger: 'click', mode: 'row'}"
          :columns="columnsData"
          :data="tableData.customer"
        />
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="pageInfo.rows"
          :page-sizes="[20,30,40]"
          :current-page.sync="pageInfo.page"
          :total="pageInfo.totalCount"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
    </el-main>
    <el-dialog
      v-if="dialogVisible.save"
      title="新增客户"
      :visible.sync="dialogVisible.save"
      destroy-on-close
      append-to-body
    >
      <detail ref="detail" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.save = false">取 消</el-button>
        <el-button type="default" :loading="btnLoading.save" @click="btnSaveDataAdd">保存并新增</el-button>
        <el-button type="primary" :loading="btnLoading.save" @click="btnSaveData">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listData, delData } from '@/api/customer'
import { jump2pages } from './mixins'
import { getDelButton, getUpdateButton } from '@/components/Table/oper-btns.js'
import detail from './detail'

export default {
  name: 'CustomerList',
  filters: {
  },
  components: { detail },
  mixins: [oftenuse, jump2pages],
  data() {
    return {
      searchData: {},
      dialogVisible: {
        save: false
      },
      columnsData: [
        { title: '操作', width: 80,
          slots: {
            default: (params) => {
              const { row } = params
              const h = this.$createElement
              const delBtnNode = getDelButton(h, { on: { click: () => { this.btnDelData(row) } }})
              const updateBtnNode = getUpdateButton(h, { props: { type: 'primary' },
                on: { click: () => { this.btnUpdateData(row) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [updateBtnNode, delBtnNode])
              return [divNode]
            }
          }
        },
        { field: 'name', title: '客户名' },
        { field: 'contact', title: '联系人', width: 100 },
        { field: 'number', title: '联系电话', width: 140 },
        { field: 'address', title: '联系地址' },
        { field: 'remarks', title: '备注' }
      ]
    }
  },
  watch: {
  },
  created() {
    this.listData()
  },
  methods: {
    btnSaveData() {
      this._btnSaveData().then(_ => {
        this.dialogVisible.save = false
      })
    },
    btnSaveDataAdd() {
      const detailComp = this.$refs.detail
      this._btnSaveData().then(_ => {
        detailComp.resetData()
      })
    },
    _btnSaveData() {
      const detailComp = this.$refs.detail
      return new Promise((resolve, reject) => {
        detailComp.handleValid('customForm').then(() => {
          const params = detailComp.dataObj
          this.setBtnLoading('save', true)
          detailComp.saveGoodData(params).then((res) => {
            this.setBtnLoading('save', false)
            if (!res.data.flag) {
              reject(new Error('保存失败！'))
            }
            this.listData()
            resolve(res)
          }).catch(err => {
            reject(err)
          })
        })
      })
    },
    btnDelData(row) {
      this.$confirm('是否要进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delData(row.id)
      })
    },
    btnViewData(row) {
      this.dialogVisible.save = true
    },
    btnAddData() {
      this.dialogVisible.save = true
    },
    btnSearch() {
      this.setBtnLoading('search', true)
      this.listData().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    btnBatchOper() {

    },
    // api
    delData(params) {
      delData(params).then(res => {
        this.$message[res.data.flag ? 'success' : 'error'](res.data.message)
        if (res.data.flag) this.listData()
      })
    },
    listData(params = { data: this.searchData, pageInfo: this.pageInfo }) {
      this.setTableLoading('customer', true)
      return new Promise((resolve, reject) => {
        listData(params).then(res => {
          this.setTableLoading('customer', false)
          if (res.data.flag) {
            this.setTableData('customer', res.data.data.data)
            this.pageInfo = res.data.data.pageInfo
          }
          resolve(res)
        }).catch(err => {
          this.setTableLoading('customer', false)
          reject(err)
        })
      })
    },
    // on
    onSelectionChange(selectionData) {
      this.setTableSelectionData('customer', selectionData)
    },
    onSizeChange(val) {
      this.pageInfo.page = 1
      this.pageInfo.rows = val
      this.listData()
    },
    onCurrentChange(val) {
      this.pageInfo.page = val
      this.listData()
    }
  }
}
</script>

<style scoped>

</style>
